﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>wrap</title>
    <style type="text/css">
        .innerBox {
            padding: 8px;
            border: 1px solid blue;
            margin: 8px;
        }

        .wrapBox {
            padding: 8px;
            border: 1px solid red;
            margin: 8px;
        }
    </style>
</head>
<body>
    <div class="innerBox">Ip man vs Iron man</div>

    <div class="innerBox">Ip man 2 vs Iron man 2</div>

    <p>
        <button id="wrapButton">wrap()</button>
    </p>
</body>
</html>
<script src="Scripts/jquery-2.1.4.js"></script>
<script language="javascript">
    $("#wrapButton").click(function () {
        $('.innerBox').wrap("<div class='wrapBox'></div>");
    });

    //jQuery wrap() is used to wrap HTML element around each of the matched elements.
</script>